<template>
  <div class="search" v-loading="isLoading" ref="searchRef">
    <h1 class="title">找到 {{total}} {{headerVal}}</h1>
    <Tabs v-model="targetVal">
      <TabPane label="单曲" name="songs">
        <template v-if="songs.length">
          <SongItem
            :songsList = 'songs'
            :offset="offset * limit"
          />
          <Page
            :totals="total"
            :limit="limit"
            :offset="offset"
            @changeOffset="changeOffset"
          />
        </template>
      </TabPane>
      <TabPane label="歌手" name="artists">
        <ul class="singer" v-if="artists.length">
          <li class="singer-item" v-for="artist of artists" @click="selectSinger(artist.id)" :key="artist">
            <img :src="artist.picUrl" alt="">
            <span class="artist-name">{{artist.name}}</span>
          </li>
        </ul>
        <Page
          :totals="total"
          :limit="limit"
          :offset="offset"
          @changeOffset="changeOffset"
        />
      </TabPane>
      <TabPane label="专辑" name="albums">
        <ul class="album" v-if="albums.length">
          <li class="album-item" v-for="album of albums" @click="selectAlbum(album.id)" :key="album">
            <img :src="album.picUrl" alt="">
            <span class="album-name">{{album.name}}</span>
            <span class="album-artist">{{album.artist}}</span>
          </li>
        </ul>
        <Page
          :totals="total"
          :limit="limit"
          :offset="offset"
          @changeOffset="changeOffset"
        />
      </TabPane>
      <TabPane label="视频" name="videos">
        <ul class="video" v-if="videos.length">
          <li class="video-item" v-for="video of videos" @click="selectVideo(video.id)" :key="video">
            <VideoItem :videoItem='video'/>
          </li>
        </ul>
        <Page
          :totals="total"
          :limit="limit"
          :offset="offset"
          @changeOffset="changeOffset"
        />
      </TabPane>
      <TabPane label="歌单" name="playlists">
        <ul class="playlist" v-if="playlists.length">
          <li class="playlist-item" v-for="playlist of playlists" @click="selectPlaylist(playlist.id)" :key="playlist">
            <img :src="playlist.coverImgUrl" alt="">
            <span class="playlist-name">{{playlist.name}}</span>
            <span class="play-count">{{playlist.trackCount}}首</span>
            <span class="by">by</span>
            <span class="playlist-creator">{{playlist.nickName}}</span>
          </li>
        </ul>
        <Page
          :totals="total"
          :limit="limit"
          :offset="offset"
          @changeOffset="changeOffset"
        />
      </TabPane>
    </Tabs>
  </div>
</template>

<script lang="ts">
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { SEARCH_TYPE } from '@/utils/constant'
import { getSearchInfo } from '@/api/search/index'
import { onMounted, ref, computed, watch, reactive, toRefs, nextTick } from 'vue'
import SongItem from '@/components/songItem/Index.vue'
import Page from '@/components/page/index.vue'
import VideoItem from './components/Video.vue'

export default {
  name: 'Index',
  components: {
    SongItem,
    Page,
    VideoItem
  },
  setup () {
    const router = useRouter()
    const route = useRoute()
    const isLoading = ref<boolean>(false)
    const searchRef = ref<Element | null>(null)
    const offset = ref<number>(0)
    const targetVal = ref<string>('songs')
    const headerVal = computed(() => SEARCH_TYPE[targetVal.value].resName)
    const limit = computed(() => SEARCH_TYPE[targetVal.value].limit)
    const total = ref<number>(0)
    const searchObj = reactive({
      songs: [],
      artists: [],
      playlists: [],
      videos: [],
      albums: []
    })
    const init = async (keyword) => {
      isLoading.value = true
      offset.value = 0
      searchObj.songs = []
      searchObj.albums = []
      searchObj.playlists = []
      searchObj.artists = []
      searchObj.videos = []
      searchRef.value.scrollTop = 0
      try {
        const searchInfo = await getSearchInfo(keyword, targetVal.value, offset.value)
        total.value = searchInfo.total
        searchObj[targetVal.value] = searchInfo[targetVal.value]
      } catch (e) {
        isLoading.value = false
      }
      isLoading.value = false
    }
    const changeOffset = async (num) => {
      offset.value = num
      isLoading.value = true
      searchRef.value.scrollTop = 0
      try {
        const searchInfo = await getSearchInfo(route.params.keyword as string, targetVal.value, offset.value)
        total.value = searchInfo.total
        searchObj[targetVal.value] = searchInfo[targetVal.value]
      } catch (e) {
        isLoading.value = false
        console.log(e)
      }
      isLoading.value = false
    }
    const selectSinger = (id) => {
      router.push({ name: 'singerDetail', params: { id } })
    }
    const selectAlbum = (id) => {
      router.push({ name: 'albumDetail', params: { id } })
    }
    const selectVideo = (id) => {
      router.push({ name: 'video', params: { id } })
    }
    const selectPlaylist = (id) => {
      router.push({ name: 'playlistDetail', params: { id } })
    }
    watch(() => targetVal.value, () => {
      init(route.params.keyword)
    })
    onBeforeRouteUpdate((to, from) => {
      if (to.params.keyword !== from.params.keyword) {
        init(to.params.keyword)
      }
    })
    onMounted(() => {
      nextTick(() => {
        init(route.params.keyword)
      })
    })
    return {
      isLoading,
      targetVal,
      headerVal,
      total,
      limit,
      offset,
      searchRef,
      ...toRefs(searchObj),
      changeOffset,
      selectSinger,
      selectAlbum,
      selectVideo,
      selectPlaylist
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;

  .title {
    height: 60px;
    line-height: 40px;
    font-weight: bold;
    font-size: 18px;
    padding: 20px 20px 0 25px;
    box-sizing: border-box;
    color: #414141;
  }

  .singer {

    li:nth-of-type(even) {
      background-color: #fafafa;
    }

    .singer-item {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding: 10px 0;
      cursor: pointer;

      >img {
        width: 60px;
        height: 60px;
        border-radius: 5px;
        margin-left: 25px;
      }

      .artist-name {
        font-size: 14px;
        padding-left: 8px;
      }

      &:hover {
        background-color: #eeeeee;
      }
    }
  }

  .album {

    li:nth-of-type(even) {
      background-color: #fafafa;
    }

    .album-item {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding: 10px 0;
      cursor: pointer;
      overflow: hidden;

      >img {
        width: 60px;
        height: 60px;
        border-radius: 5px;
        margin-left: 25px;
      }

      .album-name {
        flex: 0 0 40%;
        font-size: 14px;
        padding-left: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-height: 1.4;
      }

      .album-artist {
        padding-left: 10px;
        color: #666666;
      }

      &:hover {
        background-color: #eeeeee;
      }
    }
  }

  .video {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .video-item {
      flex: 0 0 23%;
      margin-left: 15px;
      margin-bottom: 18px;
      overflow: hidden;
    }
  }

  .playlist {

    li:nth-of-type(even) {
      background-color: #fafafa;
    }

    .playlist-item {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding: 10px 0;
      cursor: pointer;
      overflow: hidden;

      >img {
        width: 60px;
        height: 60px;
        border-radius: 5px;
        margin-left: 25px;
      }

      .playlist-name {
        flex: 0 0 35%;
        font-size: 14px;
        padding-left: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-height: 1.4;
      }

      .play-count {
        flex: 0 0 20%;
        color: #bfbfbf;
        padding-left: 10px;
        font-size: 13px;
      }

      .by {
        padding-left: 10px;
        color: #D0D0D0;
        padding-right: 6px;
      }

      .playlist-creator {
        color: #666666;
      }

      &:hover {
        background-color: #eeeeee;
      }
    }
  }
}
</style>
